<!DOCTYPE html>
<html>
<head>
<title>EasyBox example page</title>
<script type="text/javascript" src="http://easybox.googlecode.com/git/easybox/jquery-1.7.1.min.js"></script>
<script src="http://minijs.com/assets/application-573630740167e14a529d1ece9e8d0c50.js" type="text/javascript"></script>
<link href="http://minijs.com/assets/application-af54b1e4aa5a735129019b02c2ae05f1.css" media="all" rel="stylesheet" type="text/css" />

<!--
http://magp.ie/2010/04/07/auto-highlight-text-inside-pre-tags-using-jquery/
http://minijs.com/plugins/11/dropdown
http://www.jqueryrain.com/category/jquery-popup-window/page/5/

-->

<script>
$( document ).ready(function() {	
	$('a.select').click( function() {
	$('pre#code').each(function() {
		var refNode = $( this )[0];
		if ( $.browser.msie ) {
			var range = document.body.createTextRange();
			range.moveToElementText( refNode );
			range.select();
		} else if ( $.browser.mozilla || $.browser.opera ) {
			var selection = window.getSelection();
			var range = document.createRange();
			range.selectNodeContents( refNode );
			selection.removeAllRanges();
			selection.addRange( range );
		} else if ( $.browser.safari ) {
			var selection = window.getSelection();
			selection.setBaseAndExtent( refNode, 0, refNode, 1 );
		}
	} );
 	} );
 	} );
</script>


<style type="text/css">
pre{
   width:600px;
   height:300px;
   white-space:pre-wrap;
   background:#eee;
   padding:15px;
   overflow:scroll;
   overflow:auto;
   margin:20px 0;
   border:2px solid #444;
}
a.selek,a.select{
   display:block;
   width:150px;
   text-align:center;
   background:#aaa;
   border:2px solid #444;
   cursor:pointer;
   margin:0;
   padding:3px 0;
   height:20px;
   font:bold 16px Serif;
   text-decoration:none;
}
</style>

</head>

<body>

<a class="select">Select All Code</a>
<pre class="code" id="code">&lt;style type="text/css"&gt;
pre{
   width:600px;
   height:300px;
   white-space:pre-wrap;
   background:#eee;
   padding:15px;
   overflow:scroll;
   overflow:auto;
   margin:20px 0;
}
a.selek{
   text-align:center;
   background:#aaa;
   border:2px solid #444;
   cursor:pointer;
   margin:0;
   line-height:22px;
   height:22px;
   font:bold 16px Serif;
   text-decoration:none;
}
&lt;/style&gt;</pre>
<a class="selek">Select All Code</a>
    <a href="#" class="show-markup">Show usage</a>
    <pre class="prettyprint hidden-markup code" id="kode"><code class="language-javascript">$('#dropdown').miniDropdown({
  showFunction: function(item, subnav) {
      subnav.css({right: 0, opacity: 0})
                   .show()
                   .animate({right: $(window).width() - item.offset().left - item.width() , opacity: 1}, 200)
  },
  hideFunction: function(item, subnav) {
      subnav.animate({right:  $(window).width(), opacity: 0}, 300, function(){
         $(this).hide();
      })
  }
});</code></pre>

  <code class="demo">
        <ul id="mini-dropdown-2" class="dropdown">
       <li>
        <a href="#">Home</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">About</a>
        <ul>
          <li><a href="#">Another</a></li>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Another</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li><a href="#">Generic</a></li>
      <li><a href="#">Menu</a></li>
    </ul>


<script>
$(function(){
  $('#mini-dropdown-2').miniDropdown({
      animation: 'slide', 
      show: 100,
      hide: 200,
      delayIn: 100,
      delayOut: 200
    });
  });
</script>
  </code>
    <a href="#" class="show-markup">Show usage</a>
    <pre class="prettyprint hidden-markup"><code class="language-javascript">$('#dropdown').miniDropdown({
  animation: 'slide', 
  show: 100,
  hide: 200,
  delayIn: 100,
  delayOut: 200
});</code></pre>
</li><li>
    <strong>
    Custom animation
  </strong>
  <br />
  
  <code class="demo">
        <ul id="mini-dropdown-3" class="dropdown">
       <li>
        <a href="#">Home</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">About</a>
        <ul>
          <li><a href="#">Another</a></li>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Another</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li><a href="#">Generic</a></li>
      <li><a href="#">Menu</a></li>
    </ul>


<script>
$(function(){
    $('#mini-dropdown-3').miniDropdown({
      showFunction: function(item, subnav) {
        subnav.css({right: 0, opacity: 0}).show();
        subnav.animate({right: $(window).width() - item.offset().left - item.width() , opacity: 1}, 200)
      },
      hideFunction: function(item, subnav) {
        subnav.animate({right:  $(window).width(), opacity: 0}, 300, function(){
          $(this).hide();
        })
      }

    });
  });
</script>
  </code>
    <a href="#" class="show-markup">Show usage</a>
    <pre class="prettyprint hidden-markup"><code class="language-javascript">$('#dropdown').miniDropdown({
  showFunction: function(item, subnav) {
      subnav.css({right: 0, opacity: 0})
                   .show()
                   .animate({right: $(window).width() - item.offset().left - item.width() , opacity: 1}, 200)
  },
  hideFunction: function(item, subnav) {
      subnav.animate({right:  $(window).width(), opacity: 0}, 300, function(){
         $(this).hide();
      })
  }
});</code></pre>
</li>
  </ul>


  <pre class="prettyprint"><code class="language-html">&lt;ul id=&quot;dropdown&quot;&gt;
 &lt;li&gt;
  &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Generic&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Generic&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

</body>
</html>